<template>
    <Modal title="详情" v-model="modalShow" width="1200">
        <Form ref="formItem" :model="formItem" label-position="top">
            <Row :gutter="16">
                <Col span="24">
                    <Row :gutter="16">
                        <Col span="8">
                            <FormItem prop="project_name" label="项目名称:">
                                <Input v-model="formItem.project_name" disabled  placeholder="请输入项目名称"/>
                            </FormItem>
                        </Col>
                        <Col span="9">
                            <FormItem prop="project_type" label="项目类型：">
                                <RadioGroup v-model="formItem.project_type">
                                    <Radio label="1" disabled>补贴类</Radio>
                                    <Radio label="2" disabled>建设类</Radio>
                                    <Radio label="3" disabled>购买商品和服务类</Radio>
                                    <Radio label="99" disabled>其他</Radio>
                                </RadioGroup>
                            </FormItem>
                        </Col>
                        <template v-if="formItem.project_type == '2'">
                            <Col span="7">
                                <FormItem prop="project_type_build" label="建设类项目:">
                                    <RadioGroup v-model="formItem.project_type_build">
                                        <Radio label="0" disabled>新建项目</Radio>
                                        <Radio label="1" disabled>延续项目</Radio>
                                    </RadioGroup>
                                </FormItem>
                            </Col>
                        </template>
                        <template v-if="formItem.project_type == '99'">
                            <div class="type-style">
                                <Col span="7">
                                    <FormItem prop="project_type_other" label="其他类型：">
                                        <Input v-model="formItem.project_type_other" disabled placeholder="请输入其他类型"/>
                                    </FormItem>
                                </Col>
                            </div>
                        </template>
                    </Row>
                </Col>
                <Col span="24">
                    <Row :gutter="16">
                        <Col span="8">
                            <FormItem prop="budget" label="预算额度:">
                                <Input v-model="formItem.budget" type="number" disabled placeholder="请输入预算额度">
                                    <span slot="append">万元</span>
                                </Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem prop="capital_source" label="资金来源:">
                                <Input v-model="formItem.capital_source" disabled placeholder="请输入资金来源"></Input>
                            </FormItem>
                        </Col>
                        <template v-if="formItem.capital_source == '99'">
                            <Col span="8" style="margin-left: -1%">
                                <FormItem prop="capital_source_other" label="其他来源：">
                                    <Input v-model="formItem.capital_source_other" disabled placeholder="请输入其他来源"/>
                                </FormItem>
                            </Col>
                        </template>
                        <Col span="8">
                            <FormItem prop="project_cycle" label="项目周期：">
                                <Input v-model="formItem.project_cycle" disabled placeholder="请输入项目周期"/>
                            </FormItem>
                        </Col>
                        <template v-if="formItem.project_type == '1'">
                            <Col span="8">
                                <FormItem prop="issue_cycle" label="发放周期:">
                                    <RadioGroup v-model="formItem.issue_cycle">
                                        <Radio label="2" disabled>周发放</Radio>
                                        <Radio label="3" disabled>月发放</Radio>
                                        <Radio label="4" disabled>季度发放</Radio>
                                        <Radio label="5" disabled>年度发放</Radio>
                                        <Radio label="99" disabled>其他</Radio>
                                    </RadioGroup>
                                </FormItem>
                            </Col>
                            <template v-if="formItem.issue_cycle == '99'">
                                <div class="type-style-four">
                                    <Col span="8">
                                        <FormItem prop="issue_cycle_other" label="其他发放周期：">
                                            <Input v-model="formItem.issue_cycle_other" disabled placeholder="请输入其他发放周期"/>
                                        </FormItem>
                                    </Col>
                                </div>
                            </template>
                        </template>
                    </Row>
                </Col>
                <Col span="24">
                    <Row :gutter="16">
                        <template v-if="formItem.project_type != '1'">
                            <Col span="8">
                                <FormItem prop="settle_cycle" label="结算周期:">
                                    <RadioGroup v-model="formItem.settle_cycle">
                                        <!-- <Radio label="1">一次性</Radio>-->
                                        <Radio label="2" disabled>周结算</Radio>
                                        <Radio label="3" disabled>月结算</Radio>
                                        <Radio label="4" disabled>季度结算</Radio>
                                        <Radio label="5" disabled>年度结算</Radio>
                                        <Radio label="99" disabled>其他</Radio>
                                    </RadioGroup>
                                </FormItem>
                            </Col>
                            <Col span="8">
                                <template v-if="formItem.settle_cycle == '99'">
                                    <FormItem prop="settle_cycle_other" label="其他结算周期：">
                                        <Input v-model="formItem.settle_cycle_other" disabled placeholder="请输入其他结算周期"/>
                                    </FormItem>
                                </template>
                            </Col>
                        </template>
                    </Row>
                </Col>
                <Col span="24">
                    <Row :gutter="16">
                        <template v-if="formItem.project_type == '1'">
                            <Col span="8">
                                <FormItem prop="subsidy_object" label="补贴对象:">
                                    <CheckboxGroup v-model="formItem.subsidy_object" @on-change="subobj">
                                        <Checkbox label="1" disabled>个人</Checkbox>
                                        <Checkbox label="2" disabled>企业</Checkbox>
                                        <Checkbox label="3" disabled>社会机构</Checkbox>
                                        <Checkbox label="99" disabled>其他</Checkbox>
                                    </CheckboxGroup>
                                </FormItem>
                            </Col>
                            <Col span="8" v-if="showSubobj" style="margin-left: -12%">
                                <FormItem prop="subsidy_object_other" label="其他补贴对象：">
                                    <Input v-model="formItem.subsidy_object_other" disabled placeholder="请输入其他补贴对象"/>
                                </FormItem>
                            </Col>
                        </template>
                    </Row>
                </Col>
                <Col span="24">
                    <Row :gutter="16">
                        <template v-if="formItem.project_type != '1'&& formItem.project_type == '2'">
                            <Col span="8">
                                <FormItem prop="settle_object" label="结算对象:">
                                    <CheckboxGroup v-model="formItem.settle_object" @on-change="setto">
                                        <Checkbox label="2" disabled>企业</Checkbox>
                                        <Checkbox label="3" disabled>社会机构</Checkbox>
                                        <Checkbox label="99" disabled>其他</Checkbox>
                                    </CheckboxGroup>
                                </FormItem>
                            </Col>
                        </template>
                        <template v-if="formItem.project_type == '3'|| formItem.project_type == '99'">
                            <Col span="8">
                                <FormItem prop="settle_object" label="结算对象:">
                                    <CheckboxGroup v-model="formItem.settle_object" @on-change="sett">
                                        <Checkbox label="1" disabled>个人</Checkbox>
                                        <Checkbox label="2" disabled>企业</Checkbox>
                                        <Checkbox label="3" disabled>社会机构</Checkbox>
                                        <Checkbox label="99" disabled>其他</Checkbox>
                                    </CheckboxGroup>
                                </FormItem>
                            </Col>
                        </template>
                        <template v-if="formItem.project_type != '1'">
                            <div class="type-style-three">
                                <Col span="8" v-if="showSetto">
                                    <FormItem prop="settle_object_other" label="其他结算对象：">
                                        <Input v-model="formItem.settle_object_other" disabled placeholder="请输入其他结算对象"/>
                                    </FormItem>
                                </Col>
                            </div>
                        </template>
                    </Row>
                </Col>
                <Col span="24">
                    <Row :gutter="16">
                        <template v-if="formItem.project_type == '1'">
                            <Col span="12">
                                <FormItem prop="subsidy_way" label="补贴方式:">
                                    <CheckboxGroup v-model="formItem.subsidy_way" @on-change="subway">
                                        <Checkbox label="1" disabled>资金</Checkbox>
                                        <Checkbox label="2" disabled>实物</Checkbox>
                                        <Checkbox label="3" disabled>票劵</Checkbox>
                                        <Checkbox label="4" disabled>代金券</Checkbox>
                                        <Checkbox label="99" disabled>其他</Checkbox>
                                    </CheckboxGroup>
                                </FormItem>
                            </Col>
                            <Col span="12" style="margin-left: -25%" v-if="showSubway">
                                <FormItem prop="subsidy_way_other" label="其他补贴方式：">
                                    <Input v-model="formItem.subsidy_way_other" disabled style="width: 400px" placeholder="请输入其他补贴方式"/>
                                </FormItem>
                            </Col>
                        </template>
                    </Row>
                </Col>
                <Col span="24">
                    <Row :gutter="16">
                        <template v-if="formItem.project_type === '1'">
                            <Col span="24">
                                <FormItem label="补贴代发银行:" prop="subsidy_bank">
                                    <CheckboxGroup v-model="formItem.subsidy_bank" @on-change="selectOptionOne" placeholder="请选择开户银行">
                                        <Checkbox label="盛京银行" disabled></Checkbox>
                                        <Checkbox label="中国工商银行" disabled></Checkbox>
                                        <Checkbox label="中国建设银行" disabled></Checkbox>
                                        <Checkbox label="中国农业银行" disabled></Checkbox>
                                        <Checkbox label="中国银行" disabled></Checkbox>
                                        <Checkbox label="中国交通银行" disabled></Checkbox>
                                        <Checkbox label="中国邮政储蓄银行" disabled></Checkbox>
                                        <Checkbox label="中信银行" disabled></Checkbox>
                                        <Checkbox label="光大银行" disabled></Checkbox>
                                        <Checkbox label="招商银行" disabled></Checkbox>
                                        <Checkbox label="浦发银行" disabled></Checkbox>
                                        <Checkbox label="民生银行" disabled></Checkbox>
                                        <Checkbox label="华夏银行" disabled></Checkbox>
                                        <Checkbox label="平安银行" disabled></Checkbox>
                                        <Checkbox label="兴业银行" disabled></Checkbox>
                                        <Checkbox label="广发银行" disabled></Checkbox>
                                        <Checkbox label="渤海银行" disabled></Checkbox>
                                        <Checkbox label="浙商银行" disabled></Checkbox>
                                        <Checkbox label="恒丰银行" disabled></Checkbox>
                                        <Checkbox label="其他" disabled></Checkbox>
                                        <div v-if="showCheckOne" class="other-style">
                                            <Input v-model="formItem.other_subsidy_bank" disabled placeholder="填报开户银行"/>
                                        </div>
                                    </CheckboxGroup>
                                </FormItem>
                            </Col>
                            <Col span="24">
                                <FormItem label="现金发放:" prop="subsidy_cash">
                                    <CheckboxGroup v-model="formItem.subsidy_cash">
                                        <Checkbox label="1" disabled>现金发放</Checkbox>
                                    </CheckboxGroup>
                                </FormItem>
                            </Col>
                            <template>
                                <Col span="24">
                                    <FormItem label="补贴支付账户：" v-model="formItem.pay_account" :required="true">
                                        <Divider orientation="left" size="small">零余额账户</Divider>
                                    </FormItem>
                                </Col>
                                <Col span="24">
                                    <FormItem prop="pay_account_bank" label="支付银行：">
                                        <RadioGroup v-model="formItem.pay_account_bank">
                                            <Radio label="盛京银行" disabled></Radio>
                                            <Radio label="中国工商银行" disabled></Radio>
                                            <Radio label="中国建设银行" disabled></Radio>
                                            <Radio label="中国农业银行" disabled></Radio>
                                            <Radio label="中国银行" disabled></Radio>
                                            <Radio label="中国交通银行" disabled></Radio>
                                            <Radio label="中国邮政储蓄银行"></Radio>
                                            <Radio label="中信银行" disabled></Radio>
                                            <Radio label="光大银行" disabled></Radio>
                                            <Radio label="招商银行" disabled></Radio>
                                            <Radio label="浦发银行" disabled></Radio>
                                            <Radio label="民生银行" disabled></Radio>
                                            <Radio label="华夏银行" disabled></Radio>
                                            <Radio label="平安银行" disabled></Radio>
                                            <Radio label="兴业银行" disabled></Radio>
                                            <Radio label="广发银行" disabled></Radio>
                                            <Radio label="渤海银行" disabled></Radio>
                                            <Radio label="浙商银行" disabled></Radio>
                                            <Radio label="恒丰银行" disabled></Radio>
                                            <Radio label="其他" disabled></Radio>
                                            <div v-if="formItem.pay_account_bank == '其他'" class="other-style">
                                                <Input v-model="formItem.other_pay_account_bank" disabled  placeholder="请输入其它支付银行"/>
                                            </div>
                                        </RadioGroup>
                                    </FormItem>
                                </Col>
                                <template>
                                    <Col span="24">
                                        <Divider orientation="left" size="small">实体账户</Divider>
                                    </Col>
                                    <Col span="24">
                                        <FormItem prop="pay_account_banks" label="支付银行：">
                                            <CheckboxGroup v-model="formItem.pay_account_banks" @on-change="selectOptionTwo" placeholder="请选择支付银行">
                                                <Checkbox label="盛京银行" disabled></Checkbox>
                                                <Checkbox label="中国工商银行" disabled></Checkbox>
                                                <Checkbox label="中国建设银行" disabled></Checkbox>
                                                <Checkbox label="中国农业银行" disabled></Checkbox>
                                                <Checkbox label="中国银行" disabled></Checkbox>
                                                <Checkbox label="中国交通银行" disabled></Checkbox>
                                                <Checkbox label="中国邮政储蓄银行" disabled></Checkbox>
                                                <Checkbox label="中信银行" disabled></Checkbox>
                                                <Checkbox label="光大银行" disabled></Checkbox>
                                                <Checkbox label="招商银行" disabled></Checkbox>
                                                <Checkbox label="浦发银行" disabled></Checkbox>
                                                <Checkbox label="民生银行" disabled></Checkbox>
                                                <Checkbox label="华夏银行" disabled></Checkbox>
                                                <Checkbox label="平安银行" disabled></Checkbox>
                                                <Checkbox label="兴业银行" disabled></Checkbox>
                                                <Checkbox label="广发银行" disabled></Checkbox>
                                                <Checkbox label="渤海银行" disabled></Checkbox>
                                                <Checkbox label="浙商银行" disabled></Checkbox>
                                                <Checkbox label="恒丰银行" disabled></Checkbox>
                                                <Checkbox label="其他" disabled></Checkbox>
                                                <div v-if="showCheck" class="other-style">
                                                    <Input v-model="formItem.other_pay_account_banks" disabled  placeholder="请输入其支付银行"/>
                                                </div>
                                            </CheckboxGroup>
                                        </FormItem>
                                    </Col>
                                </template>
                            </template>
                            <Col span="24">
                                <Divider orientation="left" size="small">市财政直接拨付</Divider>
                            </Col>
                            <Col span="24">
                                <FormItem  prop="pay_account_direct">
                                    <CheckboxGroup v-model="formItem.pay_account_direct">
                                        <Checkbox label="1" disabled>市财政直接拨付</Checkbox>
                                    </CheckboxGroup>
                                </FormItem>
                            </Col>
                        </template>
                    </Row>
                </Col>
                <Col span="24">
                    <Row :gutter="16">
                        <template v-if="formItem.project_type !== '1'">
                            <Col span="24">
                                <FormItem  label="结算账户：" v-model="formItem.pay_account" :required="true">
                                    <Divider orientation="left" size="small">零余额账户</Divider>
                                </FormItem>
                            </Col>
                            <template>
                                <Col span="24">
                                    <FormItem prop="settle_account_bank" label="结算银行：">
                                        <RadioGroup v-model="formItem.settle_account_bank">
                                            <Radio label="盛京银行" disabled></Radio>
                                            <Radio label="中国工商银行" disabled></Radio>
                                            <Radio label="中国建设银行" disabled></Radio>
                                            <Radio label="中国农业银行" disabled></Radio>
                                            <Radio label="中国银行" disabled></Radio>
                                            <Radio label="中国交通银行" disabled></Radio>
                                            <Radio label="中国邮政储蓄银行"></Radio>
                                            <Radio label="中信银行" disabled></Radio>
                                            <Radio label="光大银行" disabled></Radio>
                                            <Radio label="招商银行" disabled></Radio>
                                            <Radio label="浦发银行" disabled></Radio>
                                            <Radio label="民生银行" disabled></Radio>
                                            <Radio label="华夏银行" disabled></Radio>
                                            <Radio label="平安银行" disabled></Radio>
                                            <Radio label="兴业银行" disabled></Radio>
                                            <Radio label="广发银行" disabled></Radio>
                                            <Radio label="渤海银行" disabled></Radio>
                                            <Radio label="浙商银行" disabled></Radio>
                                            <Radio label="恒丰银行" disabled></Radio>
                                            <Radio label="其他" disabled></Radio>
                                            <div v-if="formItem.settle_account_bank == '其他'" class="other-style">
                                                <Input v-model="formItem.other_settle_account_bank" disabled  placeholder="请输入其它结算银行"/>
                                            </div>
                                        </RadioGroup>
                                    </FormItem>
                                </Col>
                            </template>
                            <template>
                                <Col span="24">
                                    <Divider orientation="left" size="small">实体账户</Divider>
                                </Col>
                                <Col span="24">
                                    <FormItem label="结算银行：" prop="settle_account_banks">
                                        <CheckboxGroup v-model="formItem.settle_account_banks" @on-change="selectOption"
                                                       placeholder="请选择结算银行">
                                            <Checkbox label="盛京银行" disabled></Checkbox>
                                            <Checkbox label="中国工商银行" disabled></Checkbox>
                                            <Checkbox label="中国建设银行" disabled></Checkbox>
                                            <Checkbox label="中国农业银行" disabled></Checkbox>
                                            <Checkbox label="中国银行" disabled></Checkbox>
                                            <Checkbox label="中国交通银行" disabled></Checkbox>
                                            <Checkbox label="中国邮政储蓄银行" disabled></Checkbox>
                                            <Checkbox label="中信银行" disabled></Checkbox>
                                            <Checkbox label="光大银行" disabled></Checkbox>
                                            <Checkbox label="招商银行" disabled></Checkbox>
                                            <Checkbox label="浦发银行" disabled></Checkbox>
                                            <Checkbox label="民生银行" disabled></Checkbox>
                                            <Checkbox label="华夏银行" disabled></Checkbox>
                                            <Checkbox label="平安银行" disabled></Checkbox>
                                            <Checkbox label="兴业银行" disabled></Checkbox>
                                            <Checkbox label="广发银行" disabled></Checkbox>
                                            <Checkbox label="渤海银行" disabled></Checkbox>
                                            <Checkbox label="浙商银行" disabled></Checkbox>
                                            <Checkbox label="恒丰银行" disabled></Checkbox>
                                            <Checkbox value="其他" label="其他" disabled></Checkbox>
                                            <div v-if="showCheckThree" class="other-style">
                                                <Input v-model="formItem.other_settle_account_banks"  disabled placeholder="请输入其结算银行"/>
                                            </div>
                                        </CheckboxGroup>
                                    </FormItem>
                                </Col>
                                <Col span="24">
                                    <Divider orientation="left" size="small">市财政直接拨付</Divider>
                                </Col>
                                <Col span="24">
                                    <FormItem  prop="settle_account_direct">
                                        <CheckboxGroup v-model="formItem.settle_account_direct">
                                            <Checkbox label="1" disabled>市财政直接拨付</Checkbox>
                                        </CheckboxGroup>
                                    </FormItem>
                                </Col>
                            </template>
                        </template>
                    </Row>
                </Col>
            </Row>
        </Form>
        <div slot="footer">
            <Button type="text" @click="modalShow = false">关闭</Button>
        </div>
    </Modal>
</template>

<script>
export default {
  name: 'detailsOption',
  props: {
    modalWidth: {
      type: Number,
      default: () => {
        return 800
      }
    },
    dataObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      formItem: {},
      btnLoading: false,
      modalShow: false,
      showCheckOne: false,
      showCheck: false,
      showCheckThree: false,
      showSubobj: false,
      showSubway: false,
      showSetto: false
    }
  },
  computed: {},
  methods: {
    sett (val) {
      let bank = val.toString()
      if (bank.indexOf('99') >= 0) {
        this.showSetto = true
      } else {
        this.showSetto = false
        delete this.formItem.settle_object_other
      }
    },
    setto (val) {
      let bank = val.toString()
      if (bank.indexOf('99') >= 0) {
        this.showSetto = true
      } else {
        this.showSetto = false
        delete this.formItem.settle_object_other
      }
    },
    subway (val) {
      let bank = val.toString()
      if (bank.indexOf('99') >= 0) {
        this.showSubway = true
      } else {
        this.showSubway = false
        delete this.formItem.subsidy_way_other
      }
    },
    subobj (val) {
      let bank = val.toString()
      if (bank.indexOf('99') >= 0) {
        this.showSubobj = true
      } else {
        this.showSubobj = false
        delete this.formItem.subsidy_object_other
      }
    },
    selectOptionOne (val) {
      let banks = val.toString()
      if (banks.indexOf('其他') >= 0) {
        this.showCheckOne = true
      } else {
        this.showCheckOne = false
        delete this.formItem.other_subsidy_bank
      }
    },
    selectOptionTwo (val) {
      let banks = val.toString()
      if (banks.indexOf('其他') >= 0) {
        this.showCheck = true
      } else {
        this.showCheck = false
        delete this.formItem.other_pay_account_banks
      }
    },
    selectOption (val) {
      let banks = val.toString()
      if (banks.indexOf('其他') >= 0) {
        this.showCheckThree = true
      } else {
        this.showCheckThree = false
        delete this.formItem.other_settle_account_banks
      }
    },
    modalAction () {
      this.modalShow = !this.modalShow
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
  },
  watch: {
    dataObj (val) {
      console.log(val, '详情中的数据')
      this.formItem = val
      let banks = this.formItem.subsidy_bank.toString()
      if (banks.indexOf('其他') >= 0) {
        this.showCheckOne = true
      } else {
        this.showCheckOne = false
        delete this.formItem.other_subsidy_bank
      }
      let bank1 = this.formItem.pay_account_banks.toString()
      if (bank1.indexOf('其他') >= 0) {
        this.showCheck = true
      } else {
        this.showCheck = false
        delete this.formItem.other_pay_account_banks
      }
      let bank2 = this.formItem.settle_account_banks.toString()
      if (bank2.indexOf('其他') >= 0) {
        this.showCheckThree = true
      } else {
        this.showCheckThree = false
        delete this.formItem.other_settle_account_banks
      }
      let bank3 = this.formItem.settle_object.toString()
      if (bank3.indexOf('99') >= 0) {
        this.showSetto = true
      } else {
        this.showSetto = false
        delete this.formItem.settle_object_other
      }
      let bank4 = this.formItem.subsidy_way.toString()
      if (bank4.indexOf('99') >= 0) {
        this.showSubway = true
      } else {
        this.showSubway = false
        delete this.formItem.subsidy_way_other
      }
      let bank5 = this.formItem.subsidy_object.toString()
      if (bank5.indexOf('99') >= 0) {
        this.showSubobj = true
      } else {
        this.showSubobj = false
        delete this.formItem.subsidy_object_other
      }
    }
  }
}
</script>

<style scoped>
    .other-style {
        display: inline-flex;
        margin-left: -2%;
    }
</style>
